<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="reasignaciontarjetapersona.title"/></title>
    <meta name="heading" content="<fmt:message key='reasignaciontarjetapersona.heading'/>"/>
</head>

<spring:bind path="reasignacionTarjetaPersona.*">
    <c:if test="${not empty status.errorMessages}">
    <div class="error">
        <c:forEach var="error" items="${status.errorMessages}">
            <img src="<c:url value="/images/iconWarning.gif"/>"
                alt="<fmt:message key="icon.warning"/>" class="icon"/>
            <c:out value="${error}" escapeXml="false"/><br />
        </c:forEach>
    </div>
    </c:if>
</spring:bind>

<form:form commandName="reasignacionTarjetaPersona" method="post" action="reasignaciontarjetaform.html" 
	onsubmit="return onFormSubmit(this)" id="reasignacionTarjetaPersonaform">

<form:hidden path="id"/>
<form:hidden path="hdnCoEstacion" id="hdnCoEstacion"/>

<c:set var="buttons">
	<input type="submit" class="button" name="save" onclick="bCancel=false" value="<fmt:message key="button.save"/>"/>
	      
	<input type="button" class="button" onclick="location.href='<c:url value="/mainMenu.html"/>'"
	value="<fmt:message key="button.cancel"/>"/>          
</c:set>

<ul>
	
	<li>
	<label class="desc"><fmt:message key="common.filtros.busqueda"/></label>
	<div class="group" style="width: 300px">
		<div>
			<fmt:message key="common.estacion"/><br/>
			<form:select id="coEstacionBusqueda" path="coEstacionBusqueda" cssClass="text medium" >
				<option value="-1"><fmt:message key="label.itemdefault"/></option>
				<c:forEach items="${estaciones}" var="estacion" varStatus="status">
					
					<c:choose>
					<c:when test="${status.index == 0}">
						<option selected="selected" value="${estacion.id}">${estacion.deEstacion}</option>
					</c:when>
					<c:otherwise>
						<option value="${estacion.id}">${estacion.deEstacion}</option>
					</c:otherwise>
					</c:choose>	
					
				</c:forEach>
			</form:select>
		</div>
		<br/><br/>				
		<div>					
			<input type="button" onclick="buscarRangos()" value="<fmt:message key="button.search"/>"/>
		</div>		
	</div>	
	</li>
	
	<li>
		<label class="desc"><fmt:message key="common.aviso"/></label><br/>
		<div class="group" style="width: 400px">		        
		    <div>
	            <fmt:message key="reasignaciontarjetapersona.rangos.disponibles"/>  <br/><br/>    
			</div> 
		</div>
	</li>
	
	<li>	
		<table id="rangosid" cellpadding="0" class="table" cellspacing="0" style="width: 200px">
        <thead>
            <tr>
                <th scope="col"><fmt:message key="common.inicio"/></th>
                <th scope="col"><fmt:message key="common.fin"/></th>
            </tr>
        </thead>
        <tbody id="rangosbody">
			<tr id="pattern" style="display:none;">
				<td><span id="tableInicio"></span></td>
				<td><span id="tableFin" ></span></td>
			</tr>
        <c:forEach items="${rangos}" var="rango" varStatus="status">
            <c:choose>
				  <c:when test="${status.index % 2 == 0}"><tr class="odd" ></c:when>
				  <c:otherwise><tr class="even" ></c:otherwise>
			</c:choose>
                <td>
                    ${rango.inicio}
                </td>
                <td>
                    ${rango.fin}
                </td>
            </tr>
        </c:forEach>				
		</tbody>
		</table>	
	</li>
</ul>
		
<ul>
    
    <li>
        <appfuse:label styleClass="desc" key="common.inicio"/>
        <form:errors path="numeroInicio" cssClass="fieldError"/>
        <form:input path="numeroInicio" id="numeroInicio" cssClass="text medium" cssErrorClass="text medium error"/>
    </li>
    
    <li>
        <appfuse:label styleClass="desc" key="common.fin"/>
        <form:errors path="numeroFin" cssClass="fieldError"/>
        <form:input path="numeroFin" id="numeroFin" cssClass="text medium" cssErrorClass="text medium error"/>
    </li>     
    
    <li>
        <appfuse:label styleClass="desc" key="common.estacion"/>
        <form:errors path="coEstacion" cssClass="fieldError"/>
        <form:select cssClass="text medium" id="coEstacion" path="coEstacion">
        	<form:options itemValue="id" itemLabel="deEstacion" items="${estaciones}"/>
        </form:select>        
    </li>
   
    <li class="buttonBar bottom">
        <c:out value="${buttons}" escapeXml="false"/>
    </li>
</ul>
</form:form>

<script type="text/javascript">
    Form.focusFirstElement($('reasignacionTarjetaPersonaform'));
    highlightFormElements();  
  
	function onFormSubmit(theForm) {
		return validateReasignacionTarjetaPersona(theForm);
	}

	function buscarRangos(){

		var codeEstacion = dwr.util.getValue("coEstacionBusqueda");
		TarjetaPersonaService.obtenerRangosTarjetaDisponiblesPorEstacion(codeEstacion,
	    function(data) {

			dwr.util.setValue("hdnCoEstacion", codeEstacion, { escapeHtml:false });
	   	    dwr.util.removeAllRows("rangosbody", { filter:function(tr) {
	   	      return (tr.id != "pattern");
	   	    }});
	
	   	    var contador  = 0;
	   	    var bnrango,url;
	   	    for (var i = 0; i < data.length; i++) {
	
	   	    	bnrango  = data[i];
	   	    	contador = contador + 1;
	
	   	      	dwr.util.cloneNode("pattern", { idSuffix:contador });
	
	   	      	dwr.util.setValue("tableInicio"  + contador,  bnrango.inicio, { escapeHtml:false });
	   	      	
	   	      	dwr.util.setValue("tableFin"  + contador,  bnrango.fin, { escapeHtml:false });
	
				if(i % 2 == 0){
					$("pattern" + contador).className = "odd";
				}
				else{
					$("pattern" + contador).className = "even";
				}
	    	      
	    	    $("pattern" + contador).style.display = "";
	   	    }
		});
	}

</script>
<v:javascript formName="reasignacionTarjetaPersona" staticJavascript="false"/>
<script type="text/javascript" src="<c:url value="/scripts/validator.jsp"/>"></script>
<script type='text/javascript' src="<c:url value="/dwr/interface/TarjetaPersonaService.js"/>"></script>